<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="preload" href="//at.alicdn.com/t/font_3128738_fd9ta8ua2jq.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3128738_fd9ta8ua2jq.css">
    <link rel="stylesheet" href="style.css">
    <title>Music Player</title>
</head>
<body>
<h1 class="title">Music Player</h1>

<div class="music-container">

    <div class="music-info">
        <h3 class="music-name">Bohemian Rhapsody</h3>
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
    </div>
    <audio class="audio" src="music/Bohemian Rhapsody.m4a"></audio>
    <div class="img-container">
        <div class="disk">
            <img src="img/Bohemian%20Rhapsody.jpg" alt="music cover">
        </div>
    </div>
    <div class="controls">
        <button id="prev" class="control-btn">
            <span class="iconfont icon-houtui"></span>
        </button>
        <button id="play" class="control-btn play-btn">
            <span class="iconfont icon-bofang"></span>
        </button>
        <button id="next" class="control-btn">
            <span class="iconfont icon-kuaijin"></span>
        </button>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>